<template>
  <div>
    <h3>员工管理</h3>
    <span>{{ searchForm }}</span>
    <div class="search-container">
      <el-form :model="searchForm" inline>
        <!-- 姓名输入框 -->
        <el-form-item label="姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入员工姓名"
            clearable
          />
        </el-form-item>

        <!-- 性别下拉框 -->
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="请选择" clearable>
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>

        <!-- 入职日期范围选择 -->
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="searchForm.entryDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格部分 -->
    <div class="table-container">
      <div class="button-row">
        <el-button type="primary" @click="addEmployee">+ 新增员工</el-button>
        <el-button type="danger" @click="batchDelete">- 批量删除</el-button>
      </div>
      <el-table :data="employees" border style="width: 100%">
        <el-table-column type="selection" width="40" label-class-name="header-center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120" label-class-name="header-center"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80" label-class-name="header-center"></el-table-column>
        <el-table-column prop="avatar" label="头像" width="100" label-class-name="header-center">
          <template #default="scope">
            <img :src="scope.row.avatar" alt="Avatar" style="width: 40px; height: 40px;">
          </template>
        </el-table-column>
        <el-table-column prop="department" label="所属部门" width="120" label-class-name="header-center"></el-table-column>
        <el-table-column prop="position" label="职位" width="120" label-class-name="header-center"></el-table-column>
        <el-table-column prop="entryDate" label="入职日期" width="130" label-class-name="header-center"></el-table-column>
        <el-table-column prop="lastOperationTime" label="最后操作时间" width="150" label-class-name="header-center"></el-table-column>
        <el-table-column label="操作" width="160" label-class-name="header-center"> <!-- 操作列加宽 -->
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total,sizes, ->,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

// 搜索表单数据
const searchForm = ref({
  name: "",
  gender: "",
  entryDate: [],
  begin: "",
  end: "",
});

// 员工列表数据
const employees = ref([]);

// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 侦听searchEmp中的entryDate属性
watch(
  () => searchForm.value.entryDate,
  (newValue, oldValue) => {
    if (newValue && newValue.length === 2) {
      searchForm.value.begin = newValue[0];
      searchForm.value.end = newValue[1];
    } else {
      searchForm.value.begin = "";
      searchForm.value.end = "";
    }
  },
  { deep: true }
);

// 查询方法
const handleSearch = () => {
  console.log("查询参数:", searchForm);
  // 这里调用API进行查询并更新employees数据
};

// 清空方法
const handleReset = () => {
  searchForm.value = {
    name: "",
    gender: "",
    entryDate: [],
  };
};

// 新增员工
const addEmployee = () => {
  // 弹出新增员工对话框或跳转到新增员工页面
};

// 批量删除
const batchDelete = () => {
  // 获取选中的行并进行删除操作
};

// 编辑员工
const handleEdit = (index, row) => {
  console.log("编辑:", index, row);
  // 弹出编辑对话框或跳转到编辑页面
};

// 删除员工
const handleDelete = (index, row) => {
  console.log("删除:", index, row);
  // 进行删除操作
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  // 更新显示的数据
};

// 处理当前页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 更新显示的数据
};
</script>

<style scoped>
h3 {
  margin: 0 0 20px 0;
  padding-left: 0;
}

:deep(.el-table .cell) {
  text-align: center;
}

.search-container {
  padding: 0;
  margin-bottom: 20px;
}

.button-row {
  margin-bottom: 20px; /* 调整这个值来改变按钮和表格之间的间距 */
}

.table-container {
  margin-top: 20px;
}

/* 确保表单元素在一行显示 */
.el-form--inline .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

/* 去除边框和阴影 */
.el-form {
  background: transparent;
  box-shadow: none;
}
</style>
